import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/widgets/tab/common_two_tab_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:flutter_base/base/widget/base_get_builder.dart';
import 'package:flutter_base/widgets/button/common_button.dart';
import 'package:flutter_base/widgets/textfield/custom_text_field.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'login_logic.dart';

class LoginPage extends StatelessWidget {
  final logic = Get.put(LoginLogic());

  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BaseGetBuilder<LoginLogic>(
      backgroundColor: AppColor.colorF5F7FA,
      builder: (_) {
        return Stack(
          children: [
            // 背景图
            const Positioned.fill(
              child: AutoImage(
                Assets.accountBg,
                fit: BoxFit.fitWidth,
                alignment: Alignment.topCenter,
              ),
            ),

            Scaffold(
              backgroundColor: Colors.transparent,
              body: SafeArea(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    32.verticalSpaceFromWidth,
                    _buildHeader(),
                    24.verticalSpaceFromWidth,
                    _buildTabBar(),
                    Expanded(
                      child: TabBarView(
                        controller: logic.tabController,
                        children: [
                          _buildLoginContent(),
                          _buildRegisterContent(),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        );
      },
    );
  }

  Widget _buildHeader() {
    return Padding(
      padding: EdgeInsets.symmetric(
        horizontal: 24.w,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Welcome to Echo',
            style: TextStyle(
              fontSize: 28.sp,
              fontWeight: FontWeight.w600,
              color: AppColor.color0C0A09,
            ),
          ),
          SizedBox(height: 16.w),
          Text(
            'Start your journey of the mind',
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w500,
              color: AppColor.color0C0A09.withOpacity(0.16),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTabBar() {
    return Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        child: CommonTwoTabBar(
            tabController: logic.tabController,
            tabs: const ['Log in', 'Register'])
        // Container(
        //   height: 44.w,
        //   decoration: BoxDecoration(
        //     color: Colors.white,
        //     borderRadius: BorderRadius.circular(50.w),
        //   ),
        //   padding: EdgeInsets.all(2.w),
        //   child: TabBar(
        //     controller: logic.tabController,
        //     indicator: BoxDecoration(
        //       borderRadius: BorderRadius.circular(20.w),
        //       color: AppColor.color0C0A09,
        //     ),
        //     indicatorSize: TabBarIndicatorSize.tab,
        //     // indicatorPadding: EdgeInsets.symmetric(horizontal: 16.w),
        //     labelColor: Colors.white,
        //     unselectedLabelColor: AppColor.color0C0A09.withOpacity(0.16),
        //     labelStyle: TextStyle(
        //       fontSize: 14.sp,
        //       fontWeight: FontWeight.w600,
        //     ),
        //     unselectedLabelStyle: TextStyle(
        //       fontSize: 14.sp,
        //       fontWeight: FontWeight.w500,
        //     ),
        //     tabs: [
        //       Tab(text: 'Log in'),
        //       Tab(text: 'Register'),
        //     ],
        //   ),
        // ),
        );
  }

  Widget _buildLoginContent() {
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 32.w),

            // 邮箱输入
            Text(
              'Email',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: AppColor.color0C0A09,
              ),
            ),
            SizedBox(height: 8.w),
            _buildEmailInput(),

            SizedBox(height: 32.w),

            // 密码输入
            Text(
              'Password',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: AppColor.color0C0A09,
              ),
            ),
            SizedBox(height: 8.w),
            _buildPasswordInput(),

            // 忘记密码
            Align(
              alignment: Alignment.centerRight,
              child: GestureDetector(
                onTap: () {
                  logic.forgotPassword();
                },
                child: Padding(
                  padding: EdgeInsets.only(top: 8.w),
                  child: Text(
                    'Forgot password?',
                    style: TextStyle(
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w500,
                      color: AppColor.primary,
                    ),
                  ),
                ),
              ),
            ),

            SizedBox(height: 64.w),

            // 登录按钮
            CommonButton.expend(
              title: 'Log in',
              type: (!logic.emailHasError &&
                      !logic.passwordHasError &&
                      logic.emailController.text.isNotEmpty &&
                      logic.passwordController.text.isNotEmpty)
                  ? ButtonType.primary
                  : ButtonType.disabled,
              onClick: () => logic.login(),
            ),

            SizedBox(height: 12.w),

            // 同意协议
            Row(
              children: [
                GestureDetector(
                  onTap: () => logic.toggleAgreement(),
                  child: AutoImage(
                    logic.agreementChecked
                        ? Assets.commonChooseSel
                        : Assets.commonChooseNor,
                    width: 20.w,
                  ),
                ),
                SizedBox(width: 8.w),
                Text(
                  'Agree to the login agreement',
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                    color: AppColor.color83848F,
                  ),
                ),
              ],
            ),
            _buildThirdPartyLogin(),
          ],
        ),
      ),
    );
  }

  Widget _buildRegisterContent() {
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 32.w),

            // 邮箱输入
            Text(
              'Email',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: AppColor.color0C0A09,
              ),
            ),
            SizedBox(height: 8.w),
            _buildEmailInput(isRegister: true),

            SizedBox(height: 32.w),

            // 密码输入
            Text(
              'Password',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: AppColor.color0C0A09,
              ),
            ),
            SizedBox(height: 8.w),
            _buildPasswordInput(isRegister: true),

            SizedBox(height: 32.w),

            // 确认密码
            Text(
              'Confirm Password',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
                color: AppColor.color0C0A09,
              ),
            ),
            SizedBox(height: 8.w),

            _buildConfirmPasswordInput(),

            SizedBox(height: 64.w),

            // 注册按钮
            CommonButton.expend(
              title: 'Get verification code',
              type: (!logic.registerEmailHasError &&
                      !logic.registerPasswordHasError &&
                      !logic.confirmPasswordHasError &&
                      logic.registerEmailController.text.isNotEmpty &&
                      logic.registerPasswordController.text.isNotEmpty &&
                      logic.confirmPasswordController.text.isNotEmpty)
                  ? ButtonType.primary
                  : ButtonType.disabled,
              onClick: () => logic.register(),
            ),

            SizedBox(height: 12.w),

            // 同意协议
            Row(
              children: [
                GestureDetector(
                  onTap: () => logic.toggleRegisterAgreement(),
                  child: AutoImage(
                    logic.registerAgreementChecked
                        ? Assets.commonChooseSel
                        : Assets.commonChooseNor,
                    width: 20.w,
                  ),
                ),
                SizedBox(width: 8.w),
                Text(
                  'Agree to the register agreement',
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                    color: AppColor.color83848F,
                  ),
                ),
              ],
            ),
            // _buildThirdPartyLogin(),
          ],
        ),
      ),
    );
  }

  Widget _buildEmailInput({bool isRegister = false}) {
    return CustomTextField(
      textEditingController:
          isRegister ? logic.registerEmailController : logic.emailController,
      focusNode:
          isRegister ? logic.registerEmailFocusNode : logic.emailFocusNode,
      hintText: 'Please enter your email',
      hasError: isRegister ? logic.registerEmailHasError : logic.emailHasError,
      errorText:
          isRegister ? logic.registerEmailErrorText : logic.emailErrorText,
      backgroundColor: Colors.white,
      keyboardType: TextInputType.emailAddress,
      onChanged: (value) {
        if (isRegister) {
          logic.onRegisterEmailChanged(value);
        } else {
          logic.onEmailChanged(value);
        }
      },
    );
  }

  Widget _buildPasswordInput({bool isRegister = false}) {
    return CustomTextField(
      textEditingController: isRegister
          ? logic.registerPasswordController
          : logic.passwordController,
      focusNode: isRegister
          ? logic.registerPasswordFocusNode
          : logic.passwordFocusNode,
      hintText: 'Please enter your password',
      hasError:
          isRegister ? logic.registerPasswordHasError : logic.passwordHasError,
      errorText: isRegister
          ? logic.registerPasswordErrorText
          : logic.passwordErrorText,
      backgroundColor: Colors.white,
      obscureText:
          isRegister ? logic.registerObscurePassword : logic.obscurePassword,
      right: GestureDetector(
        onTap: () {
          if (isRegister) {
            logic.toggleRegisterPasswordVisibility();
          } else {
            logic.togglePasswordVisibility();
          }
        },
        child: Icon(
          (isRegister ? logic.registerObscurePassword : logic.obscurePassword)
              ? Icons.visibility_off_outlined
              : Icons.visibility_outlined,
          size: 24.w,
          color: AppColor.color83848F,
        ),
      ),
      onChanged: (value) {
        if (isRegister) {
          logic.onRegisterPasswordChanged(value);
        } else {
          logic.onPasswordChanged(value);
        }
      },
    );
  }

  Widget _buildConfirmPasswordInput() {
    return CustomTextField(
      textEditingController: logic.confirmPasswordController,
      focusNode: logic.confirmPasswordFocusNode,
      hintText: 'Please confirm your password',
      hasError: logic.confirmPasswordHasError,
      errorText: logic.confirmPasswordErrorText,
      backgroundColor: Colors.white,
      obscureText: logic.obscureConfirmPassword,
      right: GestureDetector(
        onTap: () => logic.toggleConfirmPasswordVisibility(),
        child: Icon(
          logic.obscureConfirmPassword
              ? Icons.visibility_off_outlined
              : Icons.visibility_outlined,
          size: 24.w,
          color: AppColor.color83848F,
        ),
      ),
      onChanged: (value) => logic.onConfirmPasswordChanged(value),
    );
  }

  Widget _buildThirdPartyLogin() {
    return Padding(
      padding: EdgeInsets.only(bottom: 24.w),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: 32.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 24.w,
                  height: 1.w,
                  color: AppColor.color0C0A09.withOpacity(0.16),
                ),
                SizedBox(width: 10.w),
                Text(
                  'Other login methods',
                  style: TextStyle(
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w500,
                    color: AppColor.color0C0A09.withOpacity(0.16),
                  ),
                ),
                SizedBox(width: 10.w),
                Container(
                  width: 24.w,
                  height: 1.w,
                  color: AppColor.color0C0A09.withOpacity(0.16),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _buildSocialButton(
                  icon: Icons.facebook, color: AppColor.color0095FF),
              SizedBox(width: 24.w),
              _buildSocialButton(
                  icon: Icons.g_mobiledata, color: AppColor.color0C0A09),
              SizedBox(width: 24.w),
              _buildSocialButton(
                  icon: Icons.apple, color: AppColor.color0C0A09),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildSocialButton({required IconData icon, required Color color}) {
    return Container(
      width: 52.w,
      height: 52.w,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(76.w),
        border: Border.all(
          color: AppColor.color0C0A09.withOpacity(0.05),
          width: 1.w,
        ),
      ),
      child: Center(
        child: Icon(
          icon,
          size: 28.w,
          color: color,
        ),
      ),
    );
  }
}
